<!DOCTYPE html>
<html>
<head>
    <title>tab页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="author" content="longtuhuanyu.com"/>
    <link rel="icon" href="data:;base64,=">
    <link href="styles/tabcontrol.css" type="text/css" rel="stylesheet">
</head>
<body>
</body>
<script>
    $(function($) {
        $("#wrapper").remove();
        $("body").append('<div id="wrapper" style="height:100%;width:100%;position:absolute;top:50px;"></div>');
        var typeArrays = ["热销", "所有", "最新", "特价", "预订"]
        var itab = new ITabcontrol({
            wrap: "wrapper",
            types: typeArrays,
            theme: "c",
            position: "top",
            onSelectChange:function(fromIndex,toIndex,lastContent,currentContent){
                alert("The selectIndex from " + fromIndex + " to " + toIndex);
                typeChangedTo(toIndex, currentContent);
            }
        });
        function typeChangedTo(toIndex, currentContent){
            currentContent.children().remove();
            if (currentContent.children().length != 0) {
                return;
            } else {
                var currentId = "detail_index" + toIndex;
                var contxt = "<p style='font-size:24px;'>当前选择的是："+typeArrays[toIndex]+"</p>";
                var currentWrapper = $("<div id='" + currentId + "' class='detail_subcontent'>"+contxt+"</div>");
                currentContent.append(currentWrapper);
            }
        }
    });
</script>
</html>